<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="backstage/common/head::head"></head>
<style>
    #content-container:before {
        background: none;
    }

    .lay-win {
        display: none;
    }
    #demo-nifty-settings {
        display: none !important;
    }
</style>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar" th:replace="backstage/common/header::header"></header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">
        <div id="content-container">
            <!--CONTENT CONTAINER-->
            <!--===================================================-->
            <div id="page-content">
               <!-- <button id="demo-btn-addrow" class="btn btn-purple" onclick="editSetting(1,null)"><i
                        class="demo-pli-add"></i> 增加
                </button>-->
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width:50px;">
                            序号
                        </th>
                        <th>
                            登录方式
                        </th>
                        <th>
                            appid
                        </th>
                        <th>
                            回调地址
                        </th>
                        <th style="width:250px;">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody id="loginsetting_body"> </tbody>
                    <!--<tr>
                        <td>1</td>
                        <td>微信</td>
                        <td>admin</td>
                        <td>
                            <button id="demo-btn-addrow" class="btn btn-info" onclick="addArticle()"> 修改</button>
                            <button id="demo-btn-addrow" class="btn btn-danger"> 删除</button>
                        </td>
                    </tr>-->
                </table>

            </div>
        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->

        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container" th:replace="backstage/common/left::left(6)"></nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer" th:replace="backstage/common/foot::footer"></footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
<div class="lay-win">
    <form class="form-horizontal">
        <input type="hidden" name="id" id="id"/>
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="type">登录方式</label>
                <div class="col-sm-6">
                    <!--<input type="text" placeholder="请输入登录方式" class="form-control input-sm" id="type" name="type" >-->
                    <select name="type" id="type" placeholder="请输入登录方式" class="form-control input-sm" ></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="appid">appid</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入appid" class="form-control input-sm" name="appid" id="appid">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="redirect_uri">回调地址</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入回调地址" class="form-control input-sm" name="redirectUri" id="redirect_uri">
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-3 control-label" for="demo-is-inputsmall">账号</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入账号" class="form-control input-sm" id="inputsmall">
                </div>
            </div>-->
            <!--<div class="form-group">
                <label class="col-sm-3 control-label" for="demo-is-inputsmall">用户授权路径</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入用户授权路径" class="form-control input-sm">
                </div>
            </div>-->
        </div>

    </form>
</div>

</body>

<script>
    $(function () {
        dataListPage(0, 20);
        findTypes(7,'#type');
        renderForm();
    })

    function editSetting(type,id) {

        if (type == 0) {
            findById(id);
        }
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn: ['保存', '取消'],
                yes:function () {
                    if (type == 0) {
                        update(id);
                    }else {
                        saveSetting()
                    }
                }
            })
        });
    }

    function dataListPage(pageIndex,pageSize){
//查找节点下的文章
            $.ajax({
                url: '/backstage/thirdAccount/thirdAccountList',
                type: 'get',
                data: {"pageIndex":pageIndex, "pageSize": pageSize},
                success: function (res) {
                    pageData=res;
                    var data = "";
                    if (res != null) {
                        $.each(res.list, function (i, n) {
                            data += `<tr>
                                                    <td>${n.id}</td>
                                                    <td>${n.typeVal}</td>
                                                    <td>${n.appid}</td>
                                                    <td>${n.redirectUri}</td>
                                                    <td>
                                                        <button id="demo-btn-addrow" class="btn btn-info" onclick="editSetting(0,${n.id})"> 修改</button>
                                                        <button id="demo-btn-addrow" class="btn btn-danger" onclick="delSetting(${n.id})"> 删除</button>
                                                    </td>
                                                </tr>`;
                        });
                        $("#loginsetting_body").html(data)
                    }
                }
            });
    }
    function formDatas(){
        var d = {};
        var vals = $(".form-horizontal").serializeArray();
        $.each(vals, function () {
            d[this.name] = this.value;
        });
        var data=JSON.stringify(d);
        return data;
    }

    //添加字典项
    function saveSetting() {
        var url = '/backstage/thirdAccount/addThirdAccount';
        $.ajax({
            url: url,
            type: 'post',
            data: formDatas(),
            contentType: 'application/json',
            success: function (res) {
                if (res.msg!=null){
                    layer.alert(res.msg);
                    return;
                }
                location.href = "/backstage/loginSetting";
            },error:function (res) {
                console.log(res)
            }
        });
    }

    //修改字典项
    function update(id) {
        var url = '/backstage/thirdAccount/update';
        $.ajax({
            url: url,
            type: 'post',
            data: formDatas(),
            contentType: 'application/json',
            success: function (res) {
                if (res.msg!=null){
                    layer.alert(res.msg);
                    return;
                }
                location.href = "/backstage/loginSetting";
            }
        });
    }

    /**
     * 删除字典项
     * @param dictId 字典id
     */
    function delSetting(id) {
        $.ajax({
            url: '/backstage/thirdAccount/delById',
            type: 'post',
            data: {"id": id},
            // contentType: 'application/json',
            success: function (res) {
                location.href = "/backstage/loginSetting";
            }
        });
    }

    function findById(id) {
        $.ajax({
            url: '/backstage/thirdAccount/findById',
            type: 'post',
            data: {"id": id},
            // contentType: 'application/json',
            success: function (res) {
                $('#id').val(res.id);
                $('#appid').val(res.appid);
                $('#redirect_uri').val(res.redirectUri);
                $('#type').val(res.type);
            }
        });
    }

    //查找文章标签
    function findTypes(dictionaryId,domId) {
        $.ajax({
            url: '/download/item/itemList',
            type: 'post',
            data: {"dictionaryId": dictionaryId},
            // contentType: 'application/json',
            success: function (res) {
                var lable_select='';
                $.each(res,function(i,n){
                    lable_select+=`<option value="${n.id}"> ${n.value} </option>`;
                });
                $(domId).html(lable_select);
            }
        });
    }

    function renderForm(){
        layui.use('form', function(){
            var form = layui.form;
            form.render();
        });
    }



</script>

</html>